<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2940072_7ctjwtqodh.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>一个test</title>
</head>

<body>
    <div class="nav-bar">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-xs-12">
                    <div class="logo">
                        <span>MODUS</span>
                        <i>versus</i>
                    </div>
                </div>
                <div class="col-lg-8 col-md-8 col-xs-12">
                    <ul>
                        <li><span>home</span></li>
                        <li><span>ABOUT</span></li>
                        <li><span>SERVICES</span></li>
                        <li><span>PORTFOLIO</span></li>
                        <li><span>BLOG</span></li>
                        <li><span>FEATURE</span></li>
                        <li><span>CONTACT</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container center">
        <div class="row">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/slider1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/slider2.jpg" alt="">
                    </div>
                </div>
                <div class="swiper-left">
                    <span></span>
                </div>
                <div class="swiper-right">
                    <span></span>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="row">
           <div class=" title">
            <h2>Some Of Our Top Services</h2>
            <p>Lorem Ipum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
           </div>
        </div>
        <div class="row">
            <div class="card">
                <ul>
                    <li>
                        <span></span>
                        <h2>SUSPENDISSE</h2>
                        <p>Lorem Ipum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                        <i class="changeColor">VIEW MORE</i>
                    </li>
                    <li>
                        <span></span>
                        <h2>SUSPENDISSE</h2>
                        <p>Lorem Ipum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                        <i class="changeColor">VIEW MORE</i>
                    </li>
                    <li>
                        <span></span>
                        <h2>SUSPENDISSE</h2>
                        <p>Lorem Ipum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                        <i class="changeColor">VIEW MORE</i>
                    </li>
                    <li>
                        <span></span>
                        <h2>SUSPENDISSE</h2>
                        <p>Lorem Ipum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                        <i class="changeColor">VIEW MORE</i>
                    </li>
                </ul>
            </div>
        </div>
        
    </div>
    <div class="hoverImg">
        <div class="container">
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4"><h2>WHY MODUS VERSUS</h2></div>
                <div class="col-md-4"></div>
              </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                    <span>Lorem Ipum is simply dummy text of the printing and typesetting industry.</span>            
                </div>
                <div class="col-md-2"></div>
            </div>
                <div class="row">
                    <div class="col-md-1"></div>
                    <div class="col-md-10">
                        <ul>
                            <li>
                                <img src="./images/p1.jpg" alt="">
                                <div class="mask">
                                    <div class="mask-btn">View Project</div>
                                </div>
                                <p>Winter cookies!</p>
                                <i>To keep you warm!</i>
                            </li>
                            <li>
                                <img src="./images/p2.jpg" alt="">
                                <div class="mask">
                                    <div class="mask-btn">View Project</div>
                                </div>
                                <p>Birthday Card</p>
                                <i>For my dear friend.</i>
                            </li>
                            <li>
                                <img src="./images/p3.jpg" alt="">
                                <div class="mask">
                                    <div class="mask-btn">View Project</div>
                                </div>
                                <p>Stick-A-Thing</p>
                                <i>Some collab work with my friendfrom Berlin.</i>
                            </li>
                            <li>
                                <img src="./images/p4.jpg" alt="">
                                <div class="mask">
                                    <div class="mask-btn">View Project</div>
                                </div>
                                <p>Collab with Ciah Ciah</p>
                                <i>Black guys: ciah ciah, blue guys:formatbrain</i>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-1"></div>
                </div>
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="row">
                <div></div>
                <div>
                    <ul>
                        <li>
                            <img src="./images/y1.png" alt="">
                            <div class="shadowbox"><div class="img-shadow"></div></div>
                            <h4 class="go-left">
                                <span>
                                    <i class="iconfont icon-hengxian"></i>
                                    <span>Design</span>
                                    <i class="iconfont icon-hengxian"></i>
                                </span>
                                <p>Lid est laborum dolo rumes fugats untras. Et harums ser quidem sit rerum faclilis est dolores nemis uns.</p>
                            </h4>
                            <div class="y-img"></div>
                        </li>
                        <li>
                            <img src="./images/y2.png" alt="">
                            <div class="shadowbox"><div class="img-shadow"></div></div>
                            <h4>
                                <span>
                                    <i class="iconfont icon-hengxian"></i>
                                    <span>Flexible</span>
                                    <i class="iconfont icon-hengxian"></i>
                                </span>
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolorem que laudantium totam</p>
                            </h4>
                            <div class="y-img"></div>
                        </li>
                        <li>
                            <img src="./images/y3.png" alt="">
                            <div class="shadowbox"><div class="img-shadow"></div></div>
                            <h4>
                                <span>
                                    <i class="iconfont icon-hengxian"></i>
                                    <span>Support</span>
                                    <i class="iconfont icon-hengxian"></i>
                                </span>
                                <p>Nemo enim ipsam volupatem uns quia voluptas sit aspermatur aut odit aut fugit, sed quia consequunturs.</p>
                            </h4>
                            <div class="y-img"></div>
                        </li>
                        <li>
                            <img src="./images/y4.png" alt="">
                            <div class="shadowbox"><div class="img-shadow"></div></div>
                            <h4>
                                <span>
                                    <i class="iconfont icon-hengxian"></i>
                                    <span>Easy To Edit</span>
                                    <i class="iconfont icon-hengxian"></i>
                                </span>
                                <p>Neque porro qusquam est. qui dolorem ipsum quia dolor sit amet, consectur, adipisci velit sed qula nons.</p>
                            </h4>
                            <div class="y-img y-img4"></div>
                        </li>
                        <li>
                            <img src="./images/y5.png" alt="">
                            <div class="shadowbox"><div class="img-shadow"></div></div>
                            <h4 class="go-right">
                                <span>
                                    <i class="iconfont icon-hengxian"></i>
                                    <span>SEO Ready</span>
                                    <i class="iconfont icon-hengxian"></i>
                                </span>
                                <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis voluptas uns sadips doloreusi.</p>
                            </h4>
                            
                        </li>
                    </ul>
                </div>
                <div></div>
            </div>
        </div>
    </div>
    <div class="footer-bar"></div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script>
        var navBar = document.querySelector('.nav-bar')
        var ul = navBar.querySelector('ul')
        var navSpans = ul.querySelectorAll('span')
        for (let i = 0; i < navSpans.length; i++){
            navSpans[i].onclick = function(){
                //排他
                console.log(i);
              for(var j = 0; j < navSpans.length; j++){
                navSpans[j].style.backgroundColor = 'rgb(119,198,192)';
              }
                navSpans[i].style.backgroundColor = '#666'
            }
        }
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-right",
                prevEl: ".swiper-left",
            },
        });    
        //移动到方块身上下面的变颜色
        var card = document.querySelector('.card')
        var spans = card.querySelectorAll('span')
        var is = card.querySelectorAll('i')
        var hoverImg = document.querySelector('.hoverImg')
        var Imgs = hoverImg.querySelectorAll('img')
        var masks = hoverImg.querySelectorAll('.mask')
        var lis = hoverImg.querySelectorAll('li')
        for (let i = 0; i < spans.length; i++) {
            spans[i].onmouseenter = function() {
                is[i].style.backgroundColor ='rgb(228,106,107)'
                is[i].classList.add('i-after')
            }
            spans[i].onmouseleave = function() {
                is[i].style.backgroundColor = 'rgb(106,179,170)'
                is[i].classList.remove('i-after')
            }
        }
        //动画
        for(let i = 0; i < Imgs.length; i++) {
            Imgs[i].onmouseenter = function() {
                masks[i].style.animation = 'maskbtn 0.3s linear forwards'
                masks[i].style.opacity = '0.8'
                masks[i].style.display = 'block'
            }
            lis[i].onmouseleave = function() {
                masks[i].style.display = 'none'
            }
        }
        //footer
        var footer = document.querySelector('.footer')
        var footerImgs = footer.querySelectorAll('img')
        var shadowBox = footer.querySelectorAll('.shadowbox')
        for(let i = 0; i < footerImgs.length; i++){
            footerImgs[i].onmouseenter = function() {
                shadowBox[i].style.opacity = '0.1'
            }
            footerImgs[i].onmouseleave = function() {
                shadowBox[i].style.opacity = '0'
            }
        }
    </script>
</body>

</html>